<template>

  <div class="user">
    <div class="common-content">
      <!--添加管理员-->
      <div class="common-level-rail">
        <el-button size="small" type="primary" @click="addClick()">新增职业</el-button>
        <el-button size="small" type="primary" @click="addLevelsClick()">新增级别</el-button>
        <el-button size="small" type="primary" @click="addDirectionClick()">新增方向</el-button>
        <el-button size="small" type="primary" @click="addAddressClick()">配置报名地址</el-button>
        <el-button size="small" type="primary" @click="addAppraisalClick()">配置鉴定站</el-button>
      </div>

      <!--内容-->
      <div class="product-content">
        <div class="table-wrap">
          <el-tree :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ data.title }}</span>
                <span>
                  <el-button type="text" style="margin-left: 10px;" size="mini" @click="editClick(data)">
                    <el-icon>
                      <EditPen></EditPen>
                    </el-icon>
                  </el-button>
                  <el-button v-if="data.isCareer" type="text" size="mini" style="margin-left: 10px;"
                    @click="editAddressClick(data)">
                    <el-icon>
                      <MapLocation></MapLocation>
                    </el-icon>
                  </el-button>
                  <el-button v-if="data.isCareer" type="text" size="mini" style="margin-left: 10px;"
                    @click="editAddAppraisal(data)">
                    <el-icon>
                      <School></School>
                    </el-icon>
                  </el-button>
                </span>
              </span>
            </template>
          </el-tree>

        </div>
      </div>
    </div>


    <Add v-if="open_add" ref="careerAdd" :title="title" @close="closeAdd"></Add>
    <AddLevels v-if="open_addLevels" ref="levelsAdd" :title="title" @close="closeAddLevels"></AddLevels>
    <AddDirection v-if="open_addDirection" ref="directionAdd" :title="title" @close="closeAddDirection"></AddDirection>
    <AddAddress v-if="open_addAddress" ref="addressAdd" :title="title" @close="closeAddAddress"></AddAddress>
    <AddAppraisal v-if="open_addAppraisal" ref="appraisalAdd" :title="title" @close="closeAddAppraisal"></AddAppraisal>
    
    <Edit :open="open_edit" :roleList="roleList" :shop_user_id="curModel.shop_user_id" @close="closeEdit"></Edit>
  </div>
</template>

<script>
import PositionApi from '@/api/position.js';
import Add from './dialog/Add.vue';
import AddLevels from './dialog/AddLevels.vue';
import AddAddress from './dialog/AddAddress.vue';
import AddDirection from './dialog/AddDirection.vue';
import AddAppraisal from './dialog/AddAppraisal.vue';

import Edit from './dialog/Edit.vue';
export default {
  components: {
    Add,
    AddLevels,
    AddDirection,
    AddAddress,
    AddAppraisal,
    Edit
  },
  inject: ['reload'],
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*横向表单数据模型*/
      formInline: {
        user: '',
        region: ''
      },
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      curModel: {},
      /*角色列表*/
      roleList: [],
      open_addLevels: false,
      open_addDirection: false,
      open_addAddress: false,
      open_addAppraisal: false,
    };
  },
  created() {
    /*获取列表*/
    this.getTableList();
  },
  methods: {
    /*获取列表*/
    getTableList() {
      let self = this;
      let Params = {};
      PositionApi.getNestedData(Params, true)
        .then(data => {
          self.loading = false;
          self.tableData = data.data;
          self.tableData.map(item => {
            item.isCareer = true
            item.career_id = item.id
            item.children = item.levels
            item.children.map(childItem => {
              childItem.isLevels = true
              childItem.career_id = item.id
              childItem.children = childItem.directions
              childItem.children.map(i => {
                i.isDirection = true
                i.career_id = item.id
                i.level_id = childItem.id
                return i
              })
              return childItem
            })
            return item
          })
          console.log(self.tableData, 'self.tableData')
        })
        .catch(error => { });
    },

    /*打开添加*/
    addClick(title = '') {
        this.title = title;
        this.open_add = true;
    },
    editClick(data) {
      if (data.isCareer) {
        this.open_add = true;
        this.$nextTick(() => {
          this.$refs.careerAdd.setTitle({
            title: data.title,
            id: data.id
          })
        })
      } else if (data.isLevels) {
        this.open_addLevels = true;
        this.$nextTick(() => {
          this.$refs.levelsAdd.setTitle({
            title: data.title,
            id: data.id,
            career_id: data.career_id
          })
        })
      } else {
        console.log(data, 'data')
        this.open_addDirection = true;
        this.$nextTick(() => {
          this.$refs.directionAdd.setTitle({
            title: data.title,
            id: data.id,
            level_id: data.level_id,
            career_id: data.career_id
          })
        })
      }
    },
    editAddressClick(data) {
      this.open_addAddress = true;
      this.$nextTick(() => {
        this.$refs.addressAdd.setTitle({
          career_id: data.id
        })
      })
    },
    /*关闭添加*/
    closeAdd(e) {
      this.open_add = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },
    /*关闭等级添加*/
    closeAddLevels(e) {
      this.open_addLevels = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },
    addLevelsClick(title = '') {
        this.title = title;
        this.open_addLevels = true;
    },
    /*关闭方向添加*/
    closeAddDirection(e) {
      this.open_addDirection = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },
    addDirectionClick(title = '') {
        this.title = title;
        this.open_addDirection = true;
    },
    editAddAppraisal(data) {
      this.open_addAppraisal = true;
      this.$nextTick(() => {
        this.$refs.appraisalAdd.setTitle({
          career_id: data.id
        })
      })
    },
    addAppraisalClick(title = '') {
        this.title = title;
        this.open_addAppraisal = true;
    },
    closeAddAppraisal(e) {
      this.open_addAppraisal = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },
    /*关闭地址添加*/
    closeAddAddress(e) {
      this.open_addAddress = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },
    addAddressClick(title = '') {
        this.title = title;
        this.open_addAddress = true;
    },
    /*关闭添加*/
    closeEdit(e) {
      this.open_edit = false;
      if (e && e.type == 'success') {
        this.getTableList();
      }
    },

    /*删除*/
    deleteClick(row) {
      let self = this;
      ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          self.loading = true;
          AuthApi.userDelete(
            {
              shop_user_id: row.shop_user_id
            },
            true
          )
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                ElMessage({
                  message: '恭喜你，该管理员删除成功',
                  type: 'success'
                });
                //刷新页面
                self.getTableList();
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        })
        .catch(() => { });
    }
  }
};
</script>

<style></style>